<template>
  <div class="draw-box">
    <div class="meta2d" ref="meta2dCanvas" v-autoResize="resize"></div>
    <el-dialog title="自定义弹窗页面" v-model="open" width="500px" append-to-body>
      <p>{{'该元素id为：' + id}}</p>
      <p>{{'该元素tags为：' + tags}}</p>
    </el-dialog>
  </div>
</template>
<script setup name="Configuration">
import { getDeviceByIdAndType } from "@/api/coal/device";
import { getToken } from '@/utils/auth'
import { useFullscreen } from '@vueuse/core'
import { Meta2d } from '@meta2d/core';
import { formPens } from "@meta2d/form-diagram";
import textData from './shwprocess.json'

const { proxy } = getCurrentInstance();
const router = useRouter();

const meta2dCanvas = ref(null)
const meta2d = ref(null)

const { isFullscreen, enter, exit, toggle } = useFullscreen(meta2dCanvas);
const open = ref(false)
const id = ref(null)
const tags = ref([])

onMounted(() => {

  let textDataStr = JSON.stringify(textData);
  let path = import.meta.env.VITE_SERVER_PATH;
  path = path.substring(0,path.length -1);
  textDataStr = textDataStr.replaceAll(",\"image\":\"",",\"image\":\""+path);
  let options= {
    disableScale : true,
    disableTranslate: true,
  }
  meta2d.value = new Meta2d(meta2dCanvas.value,options);
  meta2d.value.registerCanvasDraw(formPens());
  meta2d.value.fitView();
  meta2d.value.centerView();
  meta2d.value.on("toggleFullScreen",(e)=>{
    /*id.value = e.pen.id
    tags.value = e.pen.tags
    open.value = true;*/
    toggle()
  });
  meta2d.value.on("jdcDetailInfo",(e)=>{
    getDeviceByIdAndType({'id':e.params,'deviceType':'3'}).then(response => {
      if (response.data){
        router.push({ path: "/coalflow/craft", query: { deviceId: e.params }});
      } else {
        proxy.$modal.msgWarning("该设备尚未开通");
      }
    });
  });

  meta2d.value.on("sieveDetailInfo",(e)=>{
    getDeviceByIdAndType({'id':e.params,'deviceType':'5'}).then(response => {
      if (response.data){
        router.push({ path: "/sieving/detail", query: { deviceId: e.params ,deviceName:response.data.deviceName}});
      } else {
        proxy.$modal.msgWarning("该设备尚未开通");
      }
    });

  });
  meta2d.value.open(JSON.parse(textDataStr));
  meta2d.value.connectWebsocket("ws://"+location.host+import.meta.env.VITE_APP_BASE_API+"/webSocket/" + getToken());
  meta2d.value.lock(1);
})

function toggleFullScreen(){
  toggle();
}


const vAutoResize = { // 指令的名称
  mounted(el, binding, vnode, prevVnode) { // el为绑定的元素，binding为绑定给指令的对象
    let width = '', height = '';
    function isResize() {
      const style = document.defaultView.getComputedStyle(el);
      if (width !== style.width || height !== style.height) {
        binding.value();  // 关键
      }
      width = style.width;
      height = style.height;

    }
    el.__vueSetInterval__ = setInterval(isResize, 300);
  },
  unmounted(el, binding, vnode, prevVnode) {
    clearInterval(el.__vueSetInterval__);
  }
}
// 当宽高变化时就会执行
function resize() {
  //执行某些操作
  meta2d.value.resize();
}

onBeforeUnmount(() => {

})
</script>
<style scoped>
.draw-box{
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}
.meta2d {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>

